<extend name="Public/base" />

<block name="style">
    <style>
        .sidebar{
            padding: 0;
        }
        .sidebar .right-cnt{
            height: 100%;
            display: block;
            border: 1px solid #c9ccd0;
            background-color: #fff;
        }
        .sidebar .right-head{
            overflow: hidden;
            padding: 0 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #c9ccd0;
            background-color: #dee0e6;
            background-position: top;
            background-repeat: no-repeat;
        }
        .sidebar .prev-block{
            width: 99%;
            max-height: 300px;
            min-height: 100px;
            margin-bottom: 20px;
            text-align: center;
        }
        .sidebar .prev-block .file-prev{
            max-width: 203px;
            max-height: 203px;
            vertical-align: middle;
            background-color: #f0f0f0;
        }
        .sidebar .right-body-block .file-info-item {
            margin-bottom: 8px;
        }
        .sidebar .right-body-block .file-share-link {
            overflow: hidden;
            word-break: break-word;
            border: 1px solid #eee;
        }
    </style>
</block>

<block name="sidebar">
    <div class="right-cnt">
        <div class="right-head">
            未选择文件
        </div>
        <div class="right-body">
            <div class="right-body-block">
                <div class="prev-block">
                    <span>点击左侧文件名以查看信息</span>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>七牛空间</h2>
    </div>
    <div class="cf">
        <form action="__SELF__" method="post">
            <input type="text" class="text search-input" name="prefix" placeholder="输入资源名前缀匹配">
            <button class="btn" type="submit">搜索</button>
            <input type="file" name="file" id="upload-file">
            <button class="btn" target-form="ids" id="batchDelBtn" type="button">删 除</button>
            <a href="javascript:location.reload(true);" class="btn">刷新</a>
        </form>
    </div>
    <!-- 数据列表 -->
    <div class="data-table table-striped">
        <form action="{:U('batchDel')}" id="ids">
            <table id="file_list">
                <thead>
                    <tr>
                        <th></th>
                        <th>文件名</th>
                        <th>mimeType</th>
                        <th>最后更新时间</th>
                        <th>文件大小</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <volist name="_list" id="vo">
                        <tr>
                            <td><input type="checkbox" name="key" value="{$vo.key}"></td>
                            <td>{$vo.key}</td>
                            <td>{$vo.mimeType} </td>
                            <td>{$vo.putTime|strval|bcdiv="10000000"|date="Y-m-d H:i:s",###}</td>
                            <td>{$vo.fsize|format_bytes}</td>
                            <td>
                                <a href="javascript:;" data-href="{:U('rename?file='.$vo['key'])}" class="rename" title="{$vo.key}">重命名</a>
                                <a href="{:$qiniu->downLink($vo['key'])}" target="_blank">下载</a>
                                <a href="{:U('del?file='.$vo['key'])}">删除</a>
                                <a href="javascript:adv('{$vo.mimeType}','{$vo.key}')">高级</a>
                            </td>
                        </tr>
                    </volist>
                </tbody>
            </table>
        </form>
    </div>
    <!-- 分页 -->
    <div class="page">
        {$_page}
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
    <script id="hooktpl" type="text/tpl">
        <form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
            <label class="item-label">请输入文件名：</label>
            <div class="controls">
                <label class="textarea">
                    <input type="text" name="new_name" class="input-large" />
                </label>
            </div>
        </form>
    </script>

    <script id="imgAdv" type="text/tpl">
        <p>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <input type="radio" class="type" name="type" value=0 checked>
                        </td>
                        <td>
                            查看基本信息
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="radio" class="type" name="type" value=1>
                        </td>
                        <td>
                            查看exif
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="radio" class="type" name="type" value=2>
                        </td>
                        <td>
                            <form action="{:U('Qiniu/dealImage')}" class="form-horizontal hooktpl" id="resize_form" target="_blank" method="post">
                                <label class="item-label">缩放类型：</label>
                                <div class="controls">
                                    <label class="radio">
                                        <input type="radio" name="mode" value="1">
                                        非等比缩放
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="mode" value="2" checked>
                                        等比缩放
                                    </label>
                                </div>
                                <div class="controls">
                                    <label class="text">
                                        宽度
                                        <input type="text" name="w">
                                    </label>
                                    <label class="text">
                                        高度
                                        <input type="text" name="h">
                                    </label>
                                </div>
                                <div class="controls">
                                    <label class="text">
                                        质量
                                        <input type="text" name="q" value="100">(1~100)
                                    </label>
                                    <label class="select">
                                        输出格式：
                                        <select    name="format">
                                            <option>jpg</option>
                                            <option>gif</option>
                                            <option>png</option>
                                            <option>webp</option>
                                        </select>
                                    </label>
                                    <input type="hidden" name="imageView" value=1>
                                    <input type="hidden" name="key">
                                </div>
                            </form>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
    </script>

    <script id="videoAdv" type="text/tpl">
        <form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
            <label class="item-label">请输入文件名：</label>
            <div class="controls">
                <label class="textarea">
                    <input type="text" name="new_name" class="input-large" />
                </label>
            </div>
        </form>
    </script>

    <script id="mdAdv" type="text/tpl">
        <form action="{:U('Qiniu/dealDoc')}" class="form-horizontal hooktpl" id="translate_form" target="_blank" method="post">
            <label class="item-label">请输入远程css路径：</label>
            <div class="controls">
                <label class="textarea">
                    <input type="text" name="cssurl" class="input-large" />
                </label>
            </div>
            <label class="item-label">请选择模式：</label>
            <div class="controls">
                <label class="radio">
                    <input type="radio" name="mode" value=0 checked/>
                    完整的 HTML(head+body) 输出
                </label>
                <label class="radio">
                    <input type="radio" name="mode" value=1 />
                    只转为HTML Body
                </label>
            </div>
            <input type="hidden" name="key">
        </form>
    </script>

    <script type="text/javascript">
        (function($){
            //上传文件
            /* 初始化上传插件 */
            $("#upload-file").uploadify({
                "height"          : 30,
                "swf"             : "__STATIC__/uploadify/uploadify.swf",
                "fileObjName"     : "qiniu_file",
                "buttonText"      : "上传文件",
                "uploader"        : "{:U('uploadOne',array('session_id'=>session_id(),'ajax'=>1))}",
                "width"           : 120,
                'removeTimeout'   : 1,
                'onInit'          : init,
                'multi'              : false,
                "onUploadSuccess" : uploadSuccess,
                'onFallback' : function() {
                    alert('未检测到兼容版本的Flash.');
                }
            });
            function init(){
                $('#upload-file, #upload-file-queue').css('display','inline-block');
            }

            /* 文件上传成功回调函数 */
            function uploadSuccess(file, data){
                console.log(data);
                var data = $.parseJSON(data);
                if(data.status){
                    swal({
                        type: "success",
                        title: "Good job !",
                        text: data.info,
                        timer: 1000
                    });
                    setTimeout(function(){
                        location.reload(true);
                    },1000);
                } else {
                    console.log(data.data);
                    swal({
                        type: "error",
                        title: "Oops...",
                        text: data.info,
                        timer: 2000
                    });
                }
            }

            //文件信息预览
            $('#file_list tr').click(function(event){
                $target = $(event.target);
                $tr = $(this);
                if(!$target.is(':checkbox')){
                    $('#file_list :checkbox').removeAttr('checked');
                    $tr.find(':checkbox').prop('checked',true);
                    $.ajax({
                        url : '{:U('detail')}',
                        data : { key : $('td:eq(1)', $tr).text()},
                        success: function(data){
                            if(data.status){
                                $('.sidebar .right-cnt').html(data.tpl);
                            }else{
                                swal({
                                    type: "error",
                                    title: "Oops...",
                                    text: data.info,
                                    timer: 2000
                                });
                            }
                        }
                    })
                }
            });

            //批量删除
            $('#batchDelBtn').click(function(){
                var $checked = $('#file_list input[name="key"]:checked');
                if($checked.length != 0){
                    if(confirm('您确认删除吗？')){
                        $.ajax({
                            url : '{:U('batchDel')}',
                            data : { key : $checked.serializeArray()},
                            success: function(data){
                                if(data.status){
                                    swal({
                                        type: "success",
                                        title: "Good job !",
                                        text: data.info,
                                        timer: 1000
                                    });
                                    location.reload(true);
                                }else{
                                    swal({
                                        type: "error",
                                        title: "Oops...",
                                        text: data.info,
                                        timer: 2000
                                    });
                                }
                            }
                        });
                    }
                }else{
                    swal({
                        type: "error",
                        title: "Oops...",
                        text: '请先选择一项',
                        timer: 2000
                    });
                }
                return false;
            });

            //重命名
            $('.rename').click(function(){
                var action = $.trim($(this).data('href'));
                var html = $($("#hooktpl").html());
                html.find("input[name=new_name]").val(this.title);
                html.find("input[name=new_name]").parents('form').attr('action', action);
                //ajaxForm 公共函数
                function ajaxForm(element,callback,dataType){
                    var form = $(element).closest('form');
                    var dataType = dataType || 'json';
                    $.ajax({
                        type: "POST",
                        url: form.attr('action'),
                        data: form.serialize(),
                        async: false,
                        dataType:dataType,
                        success: function(data) {
                            if($.isFunction(callback)){
                                callback(data,form);
                            }
                        }
                    });
                }

                option = {
                    title:'文件名更改',
                    actions:['close'],
                    drag:true,
                    tools:true,
                    buttons:{"ok":['保存', 'blue',function(){
                        var _this = this;
                        ajaxForm(this.find('.input-large'),function(data){
                            if (data.status){
                                _this.hide();
                                swal({
                                    type: "success",
                                    title: "Good job !",
                                    text: data.info,
                                    timer: 1000
                                });
                                setTimeout(function(){
                                    location.reload(true);
                                },1000);
                            }else{
                                swal({
                                    type: "error",
                                    title: "Oops...",
                                    text: data.info,
                                    timer: 2000
                                });
                            }
                        })
                    }]}
                }
                $.thinkbox(html,option);
            });

        })(jQuery);
        //高级处理
        function adv(mime, key){
            if($.inArray(mime,['image/jpeg','image/png', 'image/gif']) != -1){
                //图片
                var html = $($("#imgAdv").html());
                var option = {
                    title:'图片处理',
                    actions:['close'],
                    drag:true,
                    tools:true,
                    buttons:{"ok":['提 交', 'blue',function(){
                        var _this = this;
                        var type = this.find('[name="type"]:checked').val();
                        if(type == 2){
                            this.find('[name=key]').val(key);
                            this.find('#resize_form').submit();
                        }else if(type == 0){
                            window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&imageInfo=1'));
                        }else{
                            window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&exif=1'))
                        }
                        this.hide();
                    }]}
                }
            }else if(key.slice(-3) == '.md'){
                //markdown
                var html = $($("#mdAdv").html());
                var option = {
                    title:'md2html转换',
                    actions:['close'],
                    drag:true,
                    tools:true,
                    buttons:{"ok":['提交', 'blue',function(){
                        var _this = this;
                        this.find('[name=key]').val(key);
                        this.find('#translate_form').submit();
                    }]}
                }
            }else{
                //视频
                var html = $($("#videoAdv").html());
                var option = {
                    title:'视频处理',
                    actions:['close'],
                    drag:true,
                    tools:true,
                    buttons:{"ok":['保存', 'blue',function(){
                        var _this = this;
                        ajaxForm(this.find('.input-large'),function(data){
                            if (data.status){
                                _this.hide();
                                swal({
                                    type: "success",
                                    title: "Good job !",
                                    text: data.info,
                                    timer: 1000
                                });
                                setTimeout(function(){
                                    location.reload(true);
                                },1000);
                            }else{
                                swal({
                                    type: "error",
                                    title: "Oops...",
                                    text: data.info,
                                    timer: 2000
                                });
                            }
                        })
                    }]}
                }
            }
            $.thinkbox(html,option);
        }
    </script>
</block>
